<template>
    <div class="charts_box">
        <div class="chart_title">
            <div v-for="(item, index) in props.chartData.chartTitle.filter(r=>!r.hideBg)" :key="index">
                <span :style="{background: item.color[1]}" class="box_span"></span>
                <span>{{item.title}}</span>
            </div>
            <div v-for="(item, index) in props.chartData.lineTitle" :key="index">
                <span :style="{background: item.color}" class="line_span"></span>
                <span>{{item.title}}</span>
            </div>
        </div>
        <div :id="chartData.id" class="charts-line"></div>
        <div class="time">(时)</div>
        <div class="type">{{ props.chartData.type }}</div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted, watch, ref} from "vue";

const props = defineProps({
    chartData: {
        type: Object,
        default: ()=>{}
    },
    type: {
        type: Number,
        default: 1
    }
})
onMounted(()=>{
    init()
})
watch(() => props.type, () => {
    init()
    }
);
let myChart
const init = () => {
    let chartDom = document.getElementById(props.chartData.id);
    if(!myChart){
        myChart = echarts.init(chartDom);
    }
    let seriesData = props.chartData.chartTitle.map(r=>{
        return {
            data: r.data,
            type: 'line',
            smooth: true,
            symbolSize: 0,
            name: r.title,
            areaStyle: {
                color: !r.hideBg?new echarts.graphic.LinearGradient(0, 1, 0, 0, r.color.map((r, index)=>{
                    return {
                        offset: index===0?0.5:index,
                        color: r
                    }
                })):'rgba(255,255,255,0)',
                opacity: 0.9
            },
            lineStyle: {
                width: r.hideBg?1:0,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, r.color.map((r, index)=>{
                    return {
                        offset: index,
                        color: r
                    }
                }))
            }
        }
    })
    let option = {
        tooltip: {
            trigger: "axis",
            borderWidth: 0,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            textStyle: {
                color: "#000"
            }
        },
        // color: [props.chartData.chartTitle[0].color[1], '#007AD9'],
        color: props.chartData.chartTitle.map(r=>{
            return r.color[1]?r.color[1]:r.color[0]
        }),
        xAxis: {
            type: 'category',
            name: '(时)',
            boundaryGap: true,
            data: ['0', '3', '6', '9', '12', '15', '18', '21', '24'],
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#889EE3'
            },
            axisLine: {
                show: true, // 显示X轴线
                lineStyle: {
                    color: 'rgba(37, 64, 123, 0.5)'
                }
            },
            axisTick: {
                show: false // 不显示X轴刻度（即数值标记）
            },

        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#889EE3'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(37, 64, 123, 1)'
                }
            },
        },
        grid: {
            left: "0%",
            right: "2%",
            bottom: "0%",
            top: "10%",
            containLabel: true
        },
        series: seriesData
    };

    option && myChart.setOption(option);
    myChart.setOption(option);
    myChart.resize();
    window.onresize = function () {
        myChart.resize()
    }
}
</script>
<style scoped lang="less">
.charts_box{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    .time{
        position: absolute;
        bottom: -4px;
        right: -8px;
        font-weight: 400;
        font-size: 12px;
        color: #889EE3;
    }
    .type{
        position: absolute;
        top: 34px;
        left: 20px;
        font-weight: 400;
        font-size: 12px;
        color: #889EE3;
    }
    .chart_title{
        display: flex;
        font-weight: 400;
        font-size: 12px;
        color: #889EE3;
        &>div{
            display: flex;
            align-items: center;
            margin-right: 16px;
            margin-top: 18px;
            .box_span{
                width: 10px;
                height: 10px;
                border-radius: 3px;
                margin-right: 6px;
            }
            .line_span{
                width: 16px;
                height: 1px;
                margin-right: 6px;
            }
        }
    }

}
.charts-line{
    flex: 1;
    //width: 100%;
    //height: 100%;
}
</style>
